<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'


const dictMap = {}
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    },
    flag: {
      type: Boolean,
      default: true
    },
    dictMap: {
      type: Object,
      default: {}
    },
    stackEntryData: {
      type: Array,
      default: []
    },
    stackOutData: {
      type: Array,
      default: []
    }
  },
  watch: {
    flag(val) {
      if (val) {
        this.getEntryData()
      } else {
        this.getOutData()
      }
    }
  },
  data() {
    return {
      chart: null,
      dict: null,
      seriesData: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      const params = {}
      this.getEntryData(params)
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
  },
  methods: {

    getEntryData() {
      this.stackEntryData.map(item => {
        item.最大单价 = item.maxPrice;
        item.最小单价 = item.minPrice;
        item.平均单价 = item.avgPrice;
        item.product = this.dictMap[item.foodType];
      })
      this.seriesData = this.stackEntryData;
      this.initChart()
    },
    getOutData() {
      this.stackOutData.map(item => {
        item.最大单价 = item.maxPrice;
        item.最小单价 = item.minPrice;
        item.平均单价 = item.avgPrice;
        item.product = this.dictMap[item.foodType];
      })
      this.seriesData = this.stackOutData;
      this.initChart()
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: { // 
          trigger: 'axis', // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['最大单价', '最小单价', '平均单价']
        },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
          // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          // 完成映射，参见后文。
          dimensions: ['product', '最大单价', '最小单价', '平均单价'],
          source: this.seriesData
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{ type: 'category' }],
        yAxis: {
          type: 'value',
          name: '金额',
          position: 'left',
          axisLabel: {
            formatter: '{value} 元'
          }
        },
        series: [{ type: 'bar', }, { type: 'bar', }, { type: 'bar', }]
      })
    }
  }
}
</script>
